<template>
	<div>
		<!-- <van-icon v-if="!changeStatus" @click="change" name="add-o" />
		<van-icon v-else @click="change" name="close" /> -->
		<div ref="active" :class="data.active?'no-active active':'no-active'" v-if="data.changeStatus">
			<div class="compon-title">{{data.title}}</div>
			<div class="idCard">
				<div class="surface">
				<div class="third-flex">
					<img class="third-example" src="../../../static/img/upload-img1.png">
					请上传身份证人像面
				</div>
				</div>
				<div class="surface">
					<div class="third-flex">
						<img class="third-example" src="../../../static/img/upload-img2.png">
						请上传身份证国徽面
					</div>
				</div>
				<div class="surface">
					<div class="third-flex">
						<img class="third-example" src="../../../static/img/upload-img3.png">
						请上传免冠人像照
					</div>
				</div>
			</div>
		</div>
		<div ref="active" :class="data.active?'no-active active':'no-active'" v-else>
			<div class="compon-title" style="background: #bdbdbd;">{{data.title}}</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			data: {
				type: Object,
				default () {
					return {}
				}

			}
		},
		data(){
			return {
				changeStatus: false
			}
		},
		methods:{
			change(){
				this.changeStatus = !this.changeStatus
			}
		}
	}
</script>

<style scoped>
	.third-flex{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.third-example{
		width: 111.11px;
		padding-bottom: 5.55px;
	}
</style>
